 <template>
  <div>
    <el-row :gutter="20">
      <el-col :xs="24" :md="8">
        <user-info></user-info>
        <language class="mgb20" :language="language"></language>
      </el-col>
      <el-col :xs="24" :md="16">
        <el-row :gutter="20" class="mgb20">
          <el-col :xs="24" :span="8" v-for="(item, index) in disPlayData" :key="index">
            <display-data  v-if="item.count"   :disPlayDataItem="item"></display-data>
          </el-col>
        </el-row>
        <technology-stack :todoList='todoList'></technology-stack>
      </el-col>

    </el-row>
  </div>
</template>

 <script setup lang="ts" >
import {  ref , computed,onMounted } from "vue"
import Language from "./cpns/dashboard-language.vue"
import TechnologyStack from "./cpns/dashboard-technology-stack.vue"
import UserInfo from "./cpns/dashboard-user-Info.vue"
import DisplayData from "./cpns/dashboard-data.vue"
import { ITodoList, ILanguage, IDisPlayData } from "./types.ts"
import { useStore } from "@/store"

const store = useStore()


 const userTotal = ref()
 const roleTotal = ref()
 const menuTotal = ref()
 const disPlayData= ref<IDisPlayData[]>()
const init = async ()=>{
 const flag = await store.dispatch('dashboard/TotalAction')
 if(flag){
      userTotal.value =   computed(()=>store.state.dashboard.total[0]?.count)
      roleTotal.value =   computed(()=>store.state.dashboard.total[1]?.count)
      menuTotal.value =   computed(()=>store.state.dashboard.total[2]?.count)
    }
    disPlayData.value =  [
  {
    title: "用户数据",
    icon: "el-icon-user-solid",
    count: userTotal.value,
    color: 'grid-con-1',
    otherOPtions: {
      shadow: "hover",
      bodyStyle: { padding: '0px' }
    }
  },
  {
    title: "角色数据",
    icon: "el-icon-tickets",
    count: roleTotal.value,
    color: 'grid-con-2',
    otherOPtions: {
      shadow: "hover",
      bodyStyle: { padding: '0px' }
    },
  },
  {
    title: "菜单数据",
    icon: "el-icon-menu",
    count: menuTotal.value,
    color: 'grid-con-3',
    otherOPtions: {
      shadow: "hover",
      bodyStyle: { padding: '0px' }
    },
  }

    ]
 }

init()
 let todoList: ITodoList[] = [
  {
    title: "项目简述",
    desc: "1、基于RBAC模型设计的权限管理系统模板  2、Element-Plus、Axios、Echarts的二次封装",
  },
  {
    title: "后端框架：Egg.js",
    desc: "Egg.js企业级开源框架,拥有完善的生态圈。",
  },
  {
    title: "数据存储：Mysql数据库",
    desc: "解决数据存储、频繁发送请求",
  },
  {
    title: "数据库ORM工具Sequelize",
    desc: "Sequelize是一个基于promise的Node.js ORM工具,支持多种数据库映射",
  },
  {
    title: "前端：Vue全家桶+Typescript",
    desc: "主流的前端开发框架",
  },
  {
    title: "后台框架ElementUI-plus ",
    desc: "主流的UI组件库",
  },
  {
    title: "数据分析：Echarts",
    desc: "开源免费的图表库",
  },

]
let language: ILanguage[] = [
  {
    title: "Vue",
    percentage: 35.2,
    color: '#42b983'

  },
  {
    title: "Typescript",
    percentage: 33.7,
    color: '#f1e05a'
  },
  {
    title: "Javascript",
    percentage: 29.5,
    color: '#64d572'

  },
  {
    title: "html",
    percentage: 0.4,
    color: '#f56c6c'
  },
]


</script>

<style class="less" scoped>
.el-row {
  margin-bottom: 20px;
}

.el-card {
  padding: 10px;
}

.mgb20 {
  margin-bottom: 20px;

}
</style>
